<template>
  <div>
    <div class="aaalist">
      <div class="list-1">
        <span>交流圈</span>
        <span>更多 &gt;</span>
      </div>
      <div class="list">
        <div class="list5" v-for="v in dataa" :key="v.id">
          <div class="doc1">
            <div class="doc-2">
              <div class="doc-img" @click="yunquan(v.quanId)">
                <img :src="v.quanImg" />
              </div>
              <p class="tit-p">{{ v.quanName }}</p>
              <p>
                <span class="s1">{{ v.quanQuanyou }}</span
                >圈友
                <span class="s2"></span>
                <span class="s3">{{ v.quanZaixian }}</span
                >在线
              </p>
              <div class="gz">+ 加入</div>
              <div class="doc-3">
                <img :src="v.quanImg" class="img3" />

                <p class="lastp">{{ v.quanName | musicianName }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list-1">
        <span>游戏圈</span>
        <span>更多 &gt;</span>
      </div>
      <div class="list2">
        <div class="list5" v-for="v in datab" :key="v.id">
          <div class="doc1">
            <div class="doc-2">
              <div class="doc-img" @click="yunquan(v.quanId)">
                <img :src="v.quanImg" />
              </div>
              <p class="tit-p">{{ v.quanName }}</p>
              <p>
                <span class="s1">{{ v.quanQuanyou }}</span
                >圈友
                <span class="s2"></span>
                <span class="s3">{{ v.quanZaixian }}</span
                >在线
              </p>
              <div class="gz">+ 加入</div>
              <div class="doc-3">
                <img :src="v.quanImg" class="img3" />

                <p class="lastp">{{ v.quanName | musicianName }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list-1">
        <span>音乐人圈</span>
        <span>更多 &gt;</span>
      </div>
      <div class="list2">
        <div class="list5" v-for="v in datac" :key="v.id">
          <div class="doc1">
            <div class="doc-2">
              <div class="doc-img" @click="yunquan(v.quanId)">
                <img :src="v.quanImg" />
              </div>
              <p class="tit-p">{{ v.quanName }}</p>
              <p>
                <span class="s1">{{ v.quanQuanyou }}</span
                >圈友
                <span class="s2"></span>
                <span class="s3">{{ v.quanZaixian }}</span
                >在线
              </p>
              <div class="gz">+ 加入</div>
              <div class="doc-3">
                <img :src="v.quanImg" class="img3" />

                <p class="lastp">{{ v.quanName | musicianName }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list-1">
        <span>曲风圈</span>
        <span>更多 &gt;</span>
      </div>
      <div class="list2">
        <div class="list5" v-for="v in datad" :key="v.id">
          <div class="doc1">
            <div class="doc-2">
              <div class="doc-img" @click="yunquan(v.quanId)">
                <img :src="v.quanImg" />
              </div>
              <p class="tit-p">{{ v.quanName }}</p>
              <p>
                <span class="s1">{{ v.quanQuanyou }}</span
                >圈友
                <span class="s2"></span>
                <span class="s3">{{ v.quanZaixian }}</span
                >在线
              </p>
              <div class="gz">+ 加入</div>
              <div class="doc-3">
                <img :src="v.quanImg" class="img3" />

                <p class="lastp">{{ v.quanName | musicianName }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list-1">
        <span>情感圈</span>
        <span>更多 &gt;</span>
      </div>
      <div class="list2">
        <div class="list5" v-for="v in datae" :key="v.id">
          <div class="doc1">
            <div class="doc-2">
              <div class="doc-img" @click="yunquan(v.quanId)">
                <img :src="v.quanImg" />
              </div>
              <p class="tit-p">{{ v.quanName }}</p>
              <p>
                <span class="s1">{{ v.quanQuanyou }}</span
                >圈友
                <span class="s2"></span>
                <span class="s3">{{ v.quanZaixian }}</span
                >在线
              </p>
              <div class="gz">+ 加入</div>
              <div class="doc-3">
                <img :src="v.quanImg" class="img3" />

                <p class="lastp">{{ v.quanName | musicianName }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="list-1">
        <span>兴趣圈</span>
        <span>更多 &gt;</span>
      </div>
      <div class="list2">
        <div class="list5" v-for="v in dataf" :key="v.id">
          <div class="doc1">
            <div class="doc-2">
              <div class="doc-img" @click="yunquan(v.quanId)">
                <img :src="v.quanImg" />
              </div>
              <p class="tit-p">{{ v.quanName }}</p>
              <p>
                <span class="s1">{{ v.quanQuanyou }}</span
                >圈友
                <span class="s2"></span>
                <span class="s3">{{ v.quanZaixian }}</span
                >在线
              </p>
              <div class="gz">+ 加入</div>
              <div class="doc-3">
                <img :src="v.quanImg" class="img3" />

                <p class="lastp">{{ v.quanName | musicianName }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getlink } from "../../../api/getlink";
export default {
  data() {
    return {
      arr: [],
      arr1: [],
    };
  },
  mounted() {
    getlink("/proxy/yunquan/findAll").then((ok) => {
      // console.log(ok.data.data);
      this.arr = ok.data.data;
      // getlink("/api/list").then((ok) => {
      //   this.arr = ok.data;
      // });
    });
  },
  computed: {
    dataa() {
      return this.arr.slice(0, 5);
    },
    datab() {
      return this.arr.slice(5, 10);
    },
    datac() {
      return this.arr.slice(10, 15);
    },
    datad() {
      return this.arr.slice(15, 20);
    },
    datae() {
      return this.arr.slice(20, 25);
    },
    dataf() {
      return this.arr.slice(25, 30);
    },
  },
  filters: {
    musicianName(val) {
      if (val.length > 8) {
        return val.substr(0, 8) + "..";
      } else {
        return val;
      }
    },
  },
  methods: {
    yunquan(id) {
      this.$router.push(`/yqxiangq?id=${id}`);
    },
  },
};
</script>

<style scoped>
.aaalist {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-bottom: 0.75rem;
}
.list {
  height: 4.73rem;
  display: flex;
  overflow: auto;
  justify-content: space-between;
}
.list2 {
  height: 5.73rem;
  display: flex;
  overflow: auto;
  justify-content: space-between;
}
.list5 {
  height: 4.5rem;
}
span:nth-of-type(1) {
  display: inline-block;
  height: 0.56rem;
  width: 4.6rem;
  color: #535353;
  font-size: 0.35rem;
}
span:nth-of-type(2) {
  display: inline-block;
  height: 0.56rem;
  width: 1.17rem;
  text-align: center;
  line-height: 0.56rem;
  border: 0.02rem solid #e3e3e3;
  border-radius: 0.2rem;
}
.doc1 {
  width: 3.4rem;
  height: 4.2rem;
  background: linear-gradient(to bottom, #bababa 14%, #ffff);
  border-radius: 0.18rem;
  display: flex;
  margin-right: 0.2rem;
}
.doc-2 {
  width: 2.23rem;
  height: 2.81rem;

  margin: auto;
  font-weight: 600;
}
.doc-img {
  width: 1.05rem;
  height: 1.05rem;

  margin: 0 auto;
  border-radius: 0.27rem;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 0.27rem;
}
.tit-p {
  font-size: 00.27rem;
  color: #212121;
  text-align: center;
  margin-top: 0.17rem;
  margin-bottom: 0.22rem;
}
p:nth-of-type(2) {
  font-size: 0.22rem;
  color: #919191;
}
p > .s1 {
  display: inline-block;
  width: auto;
  height: auto;
  font-size: 0.22rem;
  color: #919191;
}
p > .s2 {
  display: inline-block;
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 50%;
  background-color: #75bf74;
  font-size: 0.22rem;
}
.s3 {
  display: inline-block;
  font-size: 0.22rem;
}
.gz {
  width: 1.46rem;
  height: 0.56rem;
  border: 0.02rem solid #f7b1bf;
  text-align: center;
  line-height: 0.56rem;
  font-size: 0.26rem;
  color: #fe3d2b;
  margin: 0 auto;
  border-radius: 0.26rem;
  margin-top: 0.23rem;
}
.doc-3 {
  width: 3.08rem;
  height: 0.75rem;
  border-top: 00.02rem solid #e7e7e7;
  margin-top: 0.2rem;
  margin-left: -0.45rem;
  vertical-align: middle;
  padding-top: 00.1rem;
  color: #929292;
}
.img3 {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  vertical-align: middle;
}
.list-1 {
  display: flex;
  justify-content: space-between;
}
.lastp {
  display: inline-block;
  margin-left: 00.2rem;
}
</style>